<template>
  <div>
    <!-- 绘制海报的画布 -->
    <canvas 
      ref="canvas" 
      width="800" 
      height="600"
      @mousedown="handleMouseDown"
      @mousemove="handleMouseMove"
      @mouseup="handleMouseUp"
      style="cursor: default"
      :style="{ cursor: isOverText ? 'pointer' : 'default' }"
    ></canvas>
    <!-- 文字输入框 -->
    <input v-model="text" placeholder="输入文字" />
    <!-- 字体选择框 -->
    <select v-model="fontFamily">
      <option value="Arial">Arial</option>
      <option value="Helvetica">Helvetica</option>
      <option value="Times New Roman">Times New Roman</option>
    </select>
    <!-- 字号输入框 -->
    <input v-model="fontSize" type="number" placeholder="字号" />
    <!-- 文字水平位置输入框 -->
    <input v-model="x" type="number" placeholder="X 位置" />
    <!-- 文字垂直位置输入框 -->
    <input v-model="y" type="number" placeholder="Y 位置" />
    <!-- 文字状态提示 -->
    <div v-if="isTextSelected" style="color: green; margin-top: 10px;">文字已选中</div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

// 定义画布引用
const canvas = ref(null)
// 定义文字内容
const text = ref('Hello, World!')
// 定义字体
const fontFamily = ref('Arial')
// 定义字号
const fontSize = ref(30)
// 定义文字水平位置
const x = ref(100)
// 定义文字垂直位置
const y = ref(100)
// 文字是否被选中
const isTextSelected = ref(false)
// 鼠标是否悬停在文字上
const isOverText = ref(false)
// 底图对象
const image = new Image()

onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // 加载底图
  image.src =
    'https://www4.bing.com//th?id=OHR.BlueNaxos_ZH-CN7863097040_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp' // 替换为实际的底图路径
  image.onload = () => {
    // 绘制底图
    ctx.drawImage(image, 0, 0, canvas.value.width, canvas.value.height)
    // 绘制文字
    drawText(ctx)
  }
})

const drawText = (ctx) => {
  // 清除之前的文字
  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
  // 绘制底图
  ctx.drawImage(image, 0, 0, canvas.value.width, canvas.value.height)
  // 设置文字样式
  ctx.font = `${fontSize.value}px ${fontFamily.value}`
  // 根据选中状态设置文字颜色
  ctx.fillStyle = isTextSelected.value ? 'red' : 'black'
  // 绘制文字
  ctx.fillText(text.value, x.value, y.value)
  
  // 如果文字被选中，绘制边框
  if (isTextSelected.value) {
    // 获取文字宽度
    const textWidth = ctx.measureText(text.value).width
    // 绘制选中边框
    ctx.strokeStyle = 'blue'
    ctx.lineWidth = 2
    ctx.strokeRect(x.value - 5, y.value - fontSize.value + 5, textWidth + 10, fontSize.value + 10)
  }
}

// 监听文字、字体、字号、位置的变化，重新绘制文字
watch([text, fontFamily, fontSize, x, y, isTextSelected], () => {
  const ctx = canvas.value.getContext('2d')
  drawText(ctx)
})

// 检查点击位置是否在文字区域内
const isPointInTextArea = (mouseX, mouseY) => {
  const ctx = canvas.value.getContext('2d')
  ctx.font = `${fontSize.value}px ${fontFamily.value}`
  const textWidth = ctx.measureText(text.value).width
  const textHeight = fontSize.value
  
  // 文字区域的边界
  const textLeft = x.value
  const textRight = x.value + textWidth
  const textTop = y.value - textHeight
  const textBottom = y.value
  
  // 检查点击位置是否在文字区域内
  return mouseX >= textLeft && mouseX <= textRight && mouseY >= textTop && mouseY <= textBottom
}

// 处理鼠标按下事件
const handleMouseDown = (event) => {
  const rect = canvas.value.getBoundingClientRect()
  const mouseX = event.clientX - rect.left
  const mouseY = event.clientY - rect.top
  
  // 检查是否点击到文字
  if (isPointInTextArea(mouseX, mouseY)) {
    isTextSelected.value = true
  } else {
    isTextSelected.value = false
  }
  
  // 重新绘制
  const ctx = canvas.value.getContext('2d')
  drawText(ctx)
}

// 处理鼠标移动事件
const handleMouseMove = (event) => {
  const rect = canvas.value.getBoundingClientRect()
  const mouseX = event.clientX - rect.left
  const mouseY = event.clientY - rect.top
  
  // 检查鼠标是否悬停在文字上
  isOverText.value = isPointInTextArea(mouseX, mouseY)
}

// 处理鼠标松开事件
const handleMouseUp = () => {
  // 可以在这里添加拖拽结束后的逻辑
}
</script>
